<template>
  <app-header></app-header>
  <div class="login-content">
    <div class="login-flex">
      <div class="login-left">
        <h3>加入动力金融网</h3>
        <p>坐享<span>{{appInfo.allBidMoney}}%</span>历史年化收益</p>
        <p>平台用户<span>{{appInfo.userCount}}</span>位  </p>
        <p>累计成交金额<span>{{ appInfo.productAvgRate }}</span>元</p>
      </div>
      <!---->
      <div class="login-box">
        <h3 class="login-title">欢迎登录</h3>
        <form action="" id="login_Submit">
          <div class="alert-input">
            <!--<input class="form-border user-name" name="username" type="text" placeholder="您的姓名">
            <p class="prompt_name"></p>-->
            <input type="text" class="form-border user-num" name="mobile" placeholder="请输入11位手机号" v-model="phone">
            <div class="input-err">{{phoneErr}}</div>
            <p class="prompt_num"></p>
            <input type="password" placeholder="请输入登录密码" class="form-border user-pass" autocomplete name="password" v-model="secret">
            <div class="input-err">{{secretErr}}</div>
            <p class="prompt_pass"></p>
            <div class="form-yzm form-border">
              <input class="yzm-write" type="text" placeholder="输入短信验证码" v-model="code" @blur="checkCode">
              <input class="yzm-send" type="button"  v-model="yzmText"  id="yzmBtn" @click="sendLoginCode" >
            </div>
            <div class="input-err">{{codeErr}}</div>
            <p class="prompt_yan"></p>
          </div>
          <div class="alert-input-btn">
            <input type="button" class="login-submit" @click="UserLogin" value="登录">
          </div>
        </form>

      </div>

    </div>
  </div>
  <AppFooter></AppFooter>
</template>

<script>
import AppHeader from "@/components/AppHeader";
import AppFooter from "@/components/AppFooter";
import {doGet, doPost} from "@/utils/request";
import md5 from "js-md5";

export default {
  name: "LoginView",
  components: {AppHeader, AppFooter},
data(){
    return {
      appInfo:{
        userCount: 0,
        productAvgRate:0,
        allBidMoney: 0,
      },
      phone: '',
      phoneErr: '',
      secret: '',
      secretErr: '',
      code: '',
      codeErr: '',
      agree: false,
      yzmText: '获取验证码',
      leftTime: false,
    }
},
  mounted() {
    this.getAppInfo();
  },
  methods:{
    getAppInfo(){
      doGet("/app/statics").then(resp=>{
        if (resp.code===999){
          this.appInfo=resp.result;
        }
      })
    },
    //手机号
    checkPhone() {
      if (this.phone === '') {
        this.phoneErr = "请输入手机号";
      } else if (this.phone.length != 11) {
        this.phoneErr = "手机号格式错误";
      } else if (!/^1[1-9]\d{9}$/.test(this.phone)) {
        this.phoneErr = "手机号格式错误";
      } else {
        this.phoneErr = '';
      }
    },
    //密码.
    checkSecret() {
      if (this.secret == '') {
        this.secretErr = '请输入密码';
      } else if (this.secret.length < 6 || this.secret.length > 20) {
        this.secretErr = '密码格式为6到20位';
      } else if (!/^(([a-zA-Z]+[0-9]+)|([0-9]+[a-zA-Z]+))[a-zA-Z0-9]*/.test(this.secret)) {
        this.secretErr = '密码应同时包含英文和数字';
      } else {
        this.secretErr = '';
      }
    },
    //验证码
    checkCode() {
      if (!this.code) {
        this.codeErr = '请输入验证码';
      } else if (this.code.length != 5) {
        this.codeErr = '请正确输入验证码';
      } else {
        this.codeErr = '';
      }

    },
    //登录验证码
    sendLoginCode(){
      this.checkPhone();
      if (this.phoneErr === ''){
        //倒计时
        let second = 59   //倒计时时长
        this.yzmText = second + "秒后可获取";
        let handler = setInterval(() => {
          if (second <= 1) {
            this.yzmText = '获取验证码';
            this.leftTime = false;
            window.clearInterval(handler); //关闭.
          } else {
            second = second - 1;
            this.yzmText = second + "秒后可获取";
          }

        }, 1000)

        doGet("/sms/login",{phone:this.phone}).then(resp=>{
          if (resp.code===999){
            alert("短信已发送,请注意查收");
          }
        })
      }

    },


    //登录按钮.
    UserLogin(){
      this.checkPhone();
      this.checkCode();
      this.checkCode();
      if (this.phoneErr === '' && this.secretErr === ''&& this.codeErr === ''){
        let param={phone:this.phone,secret:md5(this.secret),code:this.code};
        doPost("/user/access/token",param).then(resp=>{
          if (resp.code===999){
            //登录成功.
            //存储token,跳转页面
            window.sessionStorage.setItem("ylb",JSON.stringify(resp.result));

            let returnUrl=this.$route.query.returnUrl;
            if (returnUrl){
              window.location.href=returnUrl;
            }
              else if (resp.result.name === ''){
              this.$router.push({path:'/user/realname'})
            }else {
              this.$router.push({path:'/'})
            }
          }
        })


      }
    },
  }
}
</script>

<style scoped>

</style>